<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="a"><br>
  <input type="text" placeholder="请输入数字2" v-model="b"><br>
  <button @click="calc('+')">加</button>
  <button @click="calc('-')">减</button>
  <button @click="calc('*')">乘</button>
  <button @click="calc('/')">除</button>
  <h4>运算结果：{{result}}</h4>
</template>


<script setup>

import { ref } from 'vue'
// 定义响应式变量
const a = ref('');
const b = ref('');
const result = ref('');
// 定义箭头函数
const calc = (o)=>{

  // 响应书变量在JS中使用必须.value
  // eval（“5*2）结果为10 将字符串形式的算式转为js进行运算
  result.value = eval(a.value+o+b.value);

 /* switch (o) {
    case '+':
      result.value =eval(a.value + b.value);
      break;
    case '-':
      result.value =eval(a.value -b.value);
      break;
    case '*':
      result.value =eval(a.value *b.value);
      break;
    case '/':
      if (b.value === '0') {
        result.value = '除数不能为0';
      } else {
        result.value =eval(a.value /b.value);
      }
      break;
  }*/
}

</script>


<style scoped>

</style>